<template>
  <div class="map-wrap">
    <div
      class="map-inner"
      ref="mapInner"
      :scaleRange="[0.5, 1.5]"
      v-drag="changePosition"
      :style="{ left: 150 - position.x + 'px', top: 150 - position.y + 'px' }"
      @contextmenu="handleContextmenu($event)"
    >
      <img :draggable="false" :src="$imgCatelog.sys.map.world" alt="世界地图" />
      <MapBarriers
        @changecurrentp="changeCurrentP"
        @startbattle="startbattle"
      ></MapBarriers>
      <i
        class="ewg-icon-icon_dingwei currentP"
        title="当前位置"
        :style="{ left: currentP.x - 15 + 'px', top: currentP.y - 25 + 'px' }"
      ></i>
    </div>
    <div class="tool">
      <EwgDialog ref="mapDialog" @close="handleCloseFullMap" modal>
        <template v-slot:trigger>
          <i
            title="打开地图"
            class="ewg-icon-ditumap29"
            @click="handleOpenFullMap"
          ></i>
        </template>
        <!-- 大地图 -->
        <div
          class="all-map map-wrap animate__animated animate__fadeInTopRight animate__faster"
          :class="{ animate__fadeOutTopRight: !showAll }"
        >
          <div
            class="map-inner"
            v-drag="changePositionBig"
            :style="{
              left: 500 - positionB.x + 'px',
              top: 400 - positionB.y + 'px'
            }"
            @contextmenu="handleContextmenu($event)"
          >
            <img
              :draggable="false"
              :src="$imgCatelog.sys.map.world"
              alt="世界地图"
            />
            <MapBarriers
              @changecurrentp="changeCurrentP"
              @startbattle="startbattle"
            ></MapBarriers>
            <i
              class="ewg-icon-icon_dingwei currentP"
              title="当前位置"
              :style="{
                left: currentP.x - 15 + 'px',
                top: currentP.y - 25 + 'px'
              }"
            ></i>
          </div>
          <i class="ewg-icon-icon_x clickScale" @click="handleCloseFullMap"></i>
        </div>
      </EwgDialog>
      <i title="复位" class="ewg-icon-fuwei" @click="handleRstScale"></i>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, reactive, ref } from "vue";
import { SysActionTypes } from "@/store/sys/action-types";
import MapBarriers from "./mapBarriers.vue";
import { barriersMap } from "@/const/barriers";
import { SysInfo } from "@/const/sys";
import { useStore } from "@/store";
import { EwgDialogRefs } from "@/types/components";
const store = useStore();

export default defineComponent({
  components: {
    MapBarriers
  },
  setup(props, ctx) {
    const position = reactive({ x: 200, y: 200 });
    const positionB = reactive({ x: 200, y: 200 });
    const currentP = reactive({ x: 200, y: 200 });
    const mapDialog = ref<EwgDialogRefs>();
    const showAll = ref(false);
    onBeforeMount(() => {
      position.x = 242;
      position.y = 446;
      currentP.x = 242;
      currentP.y = 446;
      positionB.x = 242;
      positionB.y = 446;
    });
    const mapInner = ref();
    const handleRstScale = () => {
      mapInner.value.rstScale(currentP);
    };
    const handleOpenFullMap = () => {
      showAll.value = true;
      positionB.x = position.x;
      positionB.y = position.y;
      mapDialog.value?.open();
    };
    const handleCloseFullMap = () => {
      showAll.value = false;
      setTimeout(() => {
        mapDialog.value?.close();
      }, 300);
      handleRstScale();
    };
    const changeCurrentP = ({ x, y }: { x: number; y: number }) => {
      currentP.x = x;
      currentP.y = y;
    };
    const changePosition = ({ x, y }: { x: number; y: number }) => {
      position.x = 150 - x;
      position.y = 150 - y;
    };
    const changePositionBig = ({ x, y }: { x: number; y: number }) => {
      positionB.x = 500 - x;
      positionB.y = 400 - y;
    };
    const startbattle = (id: number) => {
      ctx.emit("startbattle", id);
    };
    const handleContextmenu = (e: any) => {
      if (e.target.getAttribute("name") === "map-barriers") {
        const currentP = {
          x: e.offsetX,
          y: e.offsetY
        };
        changeCurrentP(currentP);
      } else if (e.target.getAttribute("name") === "map-barrier") {
        const currentP = {
          x: e.target.getAttribute("positionX"),
          y: e.target.getAttribute("positionY")
        };
        changeCurrentP(currentP);
        const id = +e.target.getAttribute("barrierId");
        const item = barriersMap.get(id);
        store.dispatch(
          SysActionTypes.SYS_PUSH_INFO,
          new SysInfo(`正在进入${item?.name} `, 2)
        );
        startbattle(id);
      }
    };

    return {
      position,
      positionB,
      currentP,
      mapInner,
      handleRstScale,
      handleOpenFullMap,
      handleCloseFullMap,
      changeCurrentP,
      changePosition,
      changePositionBig,
      handleContextmenu,
      mapDialog,
      showAll,
      startbattle
    };
  }
});
</script>
<style lang="scss" scoped>
.map-wrap {
  width: 300px;
  height: 300px;
  background: $--color-earthy;
  overflow: hidden;
  position: relative;
  border: 5px solid $--color-earthy;
  .map-inner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1600px;
    height: 1065px;
    img {
      width: 100%;
      height: 100%;
    }
    .currentP {
      transition: top 0.5s linear, left 0.5s linear;
      position: absolute;
      font-size: 30px;
      top: 0;
      left: 0;
      color: #fffffa;
      pointer-events: none;
    }
  }
  .tool {
    position: absolute;
    right: 0;
    bottom: 0;
    & > i {
      color: #ffffff;
      font-size: 30px;
      cursor: pointer;
      opacity: 0.3;
      &:hover {
        opacity: 0.8;
      }
      &:active {
        opacity: 0.6;
      }
    }
  }
}
.all-map {
  width: 1000px;
  height: 800px;
  & > i {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 60px;
    color: $--color-white-half-quarter;
    cursor: pointer;
  }
}
</style>
